<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>田块列表</title>
		<link rel="import" href="../header.html">
		<style>
			.text_center{
				text-align: center;
			}

		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">田块列表</h1>
		</header>
		<div class="mui-content" id="rrapp" v-cloak>
			<!-- 田块列表显示层 -->
			<div v-show="showTkList">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<div>
							<label>田块编号：</label>
							<input v-model="tkNum" type="text" placeholder="输入数字">
							<button type="button" class="mui-btn mui-btn-success">搜索</button>
						</div>
					</li>
					<li class="mui-table-view-cell mui-media" v-for="tm,index in tkList">
						<a href="javascript:;">
							<div class="mui-media-body">
								<b>{{tm.name}}</b>
								<p v-if="tm.status==0" class='mui-ellipsis'>状态：{{tm.farmlandStatusDesc}}</p>
								<p v-if="tm.status==1" class='mui-ellipsis'>状态：{{tm.farmlandStatusDesc}}</p>
								<p class='mui-ellipsis'>作物：{{tm.cropDictName}}</p>
								<button type="button" @click="getTkXq(tm.id)" class="mui-btn mui-btn-success">>></button>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<!-- 田块详情显示层 -->
			<div v-show="!showTkList">
				<div class="mui-card">
					<!--页眉，放置标题-->
					<div class="mui-card-header">{{tk.name}}详情页</div>
					<!--内容区-->
					<div class="mui-card-footer">
						<div class="mui-card-content">
							<p class='mui-ellipsis'>区域：{{tk.name}}</p>
							<p class='mui-ellipsis'>作物：{{tk.cropDictName}}</p>
							<p class='mui-ellipsis'>状态：{{tk.farmlandStatusDesc}}</p>
							<p class='mui-ellipsis'>水位：{{sxbw.waterDepth}}</p>
							<p class='mui-ellipsis'>水温：{{sxbw.waterTemperature}}</p>
							<p class='mui-ellipsis'>风向：{{sxbw.windDirection}}</p>
							<p class='mui-ellipsis'>风速传感器：{{sxbw.waterDepth}}</p>
							<p class='mui-ellipsis'>风速：{{sxbw.fscgq}}</p>
							<p class='mui-ellipsis'>光照度：{{sxbw.gzd}}</p>
							<p class='mui-ellipsis'>日雨量：{{sxbw.ryl}}</p>
							<p class='mui-ellipsis'>累积雨量：{{sxbw.ljjy}}</p>
							<p class='mui-ellipsis'>电池：{{sxbw.solarCell}}</p>
							<p class='mui-ellipsis'>
								<button type="button" class="mui-btn mui-btn-success" @click="szkz">水闸控制</button>
								<button type="button" class="mui-btn mui-btn-success" @click="tkjk()">田块监控</button>
							</p>
						</div>
					</div>
					<!--页脚，放置补充信息或支持的操作-->
					<div class="mui-card-footer">
						<!-- 闸门 -->
						<div class="mui-card-content" v-show="showZhamen">
							<p class='mui-ellipsis'>闸门1：
								<div @click="openZhamen(1)" id="zhamen1" class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</p>
							<p class='mui-ellipsis'>闸门2：
								<div @click="openZhamen(2)" id="zhamen2" class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</p>
							<p class='mui-ellipsis'>闸门3：
								<div @click="openZhamen(3)" id="zhamen3" class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</p>
							<p class='mui-ellipsis'>闸门4：
								<div @click="openZhamen(4)" id="zhamen4" class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</p>
							<p class='mui-ellipsis'>闸门5：
								<div @click="openZhamen(5)" id="zhamen5" class="mui-switch mui-switch-blue">
									<div class="mui-switch-handle"></div>
								</div>
							</p>
							<p class='mui-ellipsis'>
								<button @click="fsbw(tk.id)" type="button" class="mui-btn mui-btn-success">发送报文</button>
							</p>
						</div>
						<!-- 摄像头 -->
						<div class="mui-card-content" v-show="!showZhamen">
							<video style="width:100%;height:200px;" id="sxtVideo" controls="controls"></video>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>


		<script>
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
			}(mui, document));
			var vm = new Vue({
				el: '#rrapp',
				data: {
					tkList: [], //田块集合
					tkNum: null, //田块编号
					showTkList: true,
					tk: {}, //田块数据集合
					showZhamen: true,
					sxbw: {}, //上行报文
					xxbw: { //下行报文
						farmlandInfoId: '',
						gateA: '0',
						gateB: '0',
						gateC: '0',
						gateD: '0',
						gateE: '0',
					},
					sxtToken: '', //摄像头token
					sxtNum: '', //摄像头序列号
				},
				methods: {
					getTkList: function() { //田块数据集
						var self = this;
						self.showTkList = true;
						mui.ajax(baseUrl + '/buss/bussfarmlandinfo/list', {
							data: {
								'tkNum': self.tkNum,
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							success: function(data) {
								//获得服务器响应
								self.tkList = data.page.list;
							}
						});
					},
					getTkXq: function(id) { //田块详情
						vm.showTkList = false;
						mui.ajax(baseUrl + '/buss/bussfarmlandinfo/info/' + id, {
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							success: function(data) {
								//获得服务器响应								
								vm.tk = data.bussFarmlandInfo;
								vm.sxbw = data.sxbw;
								vm.sxtToken = data.map.token;
								vm.sxtNum = data.map.source;
								if (data.count > 0) {
									if (vm.sxbw.gateA == "开") {
										vm.xxbw.gateA = 1;
										//动态加载开关状态
										var div = document.getElementById('zhamen1').className = 'mui-switch mui-switch-blue" mui-active';
									}
									if (vm.sxbw.gateB == "开") {
										vm.xxbw.gateB = 1;
										//动态加载开关状态
										var div = document.getElementById('zhamen2').className = 'mui-switch mui-switch-blue" mui-active';
									}
									if (vm.sxbw.gateC == "开") {
										vm.xxbw.gateC = 1;
										//动态加载开关状态
										var div = document.getElementById('zhamen3').className = 'mui-switch mui-switch-blue" mui-active';
									}
									if (vm.sxbw.gateD == "开") {
										vm.xxbw.gateD = 1;
										//动态加载开关状态
										var div = document.getElementById('zhamen4').className = 'mui-switch mui-switch-blue" mui-active';
									}
									if (vm.sxbw.gateE == "开") {
										vm.xxbw.gateE = 1;
										//动态加载开关状态
										var div = document.getElementById('zhamen5').className = 'mui-switch mui-switch-blue" mui-active';
									}
								} else {
									vm.showZhamen = false;
								}
							}
						});
					},
					openZhamen: function(num) {
						if (num == 1) {
							var isActive = document.getElementById("zhamen1").classList.contains("mui-active");
							if (isActive) {
								console.log("打开闸门1");
								vm.xxbw.gateA = 1;
							} else {
								console.log("关闭闸门1");
								vm.xxbw.gateA = 0;
							}
						} else if (num == 2) {
							var isActive = document.getElementById("zhamen2").classList.contains("mui-active");
							if (isActive) {
								console.log("打开闸门2");
								vm.xxbw.gateB = 1;
							} else {
								console.log("关闭闸门2");
								vm.xxbw.gateB = 0;
							}
						} else if (num == 3) {
							var isActive = document.getElementById("zhamen3").classList.contains("mui-active");
							if (isActive) {
								console.log("打开闸门3");
								vm.xxbw.gateC = 1;
							} else {
								console.log("关闭闸门3");
								vm.xxbw.gateC = 0;
							}
						} else if (num == 4) {
							var isActive = document.getElementById("zhamen4").classList.contains("mui-active");
							if (isActive) {
								console.log("打开闸门4");
								vm.xxbw.gateD = 1;
							} else {
								console.log("关闭闸门4");
								vm.xxbw.gateD = 0;
							}
						} else {
							var isActive = document.getElementById("zhamen5").classList.contains("mui-active");
							if (isActive) {
								console.log("打开闸门5");
								vm.xxbw.gateE = 1;
							} else {
								console.log("关闭闸门5");
								vm.xxbw.gateE = 0;
							}
						}
					},
					fsbw: function(tkId) {
						vm.xxbw.farmlandInfoId = tkId;
						mui.ajax(baseUrl + '/buss/bussrtusendrecord/save', {
							data: vm.xxbw,
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 15000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(result) {
								//服务器返回响应，根据响应结果，分析是成功；
								if (result.code == 0) {
									mui.toast('操作成功', {
										duration: 'long',
										type: 'div'
									})
								} else {
									mui.toast(result.msg, {
										icon: 0
									}, {
										duration: 'long',
										type: 'div'
									})
								}
							}
						});
					},
					szkz: function() { //关闭直播
						vm.showZhamen = true;
						var data = {
							accessToken: vm.sxtToken,
							'source': '' + vm.sxtNum + ':1'
						};
						mui.ajax('https://open.ys7.com/api/lapp/live/video/close', {
							data: data,
							type: 'post', //HTTP请求类型
							success: function(data) {
								//获得服务器响应
								console.log("关闭直播功能打印信息------------------");
								console.log(data);
							}
						});
					},
					tkjk: function() { //开始直播
						vm.showZhamen = false;
						console.log("token------------" + vm.sxtToken);
						console.log("序列号------------" + vm.sxtNum);
						var data = {
							accessToken: vm.sxtToken,
							'source': '' + vm.sxtNum + ':1'
						};
						mui.ajax('https://open.ys7.com/api/lapp/live/video/open', {
							data: data,
							type: 'post', //HTTP请求类型
							success: function(data) {
								//获得服务器响应
								console.log("开通直播功能打印信息------------------");
								console.log(data);
								vm.getZbdz();
							}
						});
					},
					getZbdz: function() { //获取直播地址并给予video的src初始值
						var data = {
							accessToken: vm.sxtToken,
							'source': '' + vm.sxtNum + ':1'
						};
						mui.ajax('https://open.ys7.com/api/lapp/live/address/get', {
							data: data,
							type: 'post', //HTTP请求类型
							success: function(data) {
								//获得服务器响应
								console.log("获取直播地址打印信息------------------");
								console.log(data.data[0].hlsHd);
								//先清除src
								document.getElementById("sxtVideo").removeAttribute("src");
								//再添加src
								document.getElementById('sxtVideo').setAttribute("src", data.data[0].hlsHd);
							}
						});
					}
				},
				mounted: function() {
					this.getTkList();
				},
			});
		</script>
	</body>
</html>
